<template>
  <div class="login_container">
    <div class="login_span">
      <div class="avatar_box">
        <img src="/Imgs/Thumbnail/2021082111489522.jpg" />
      </div>
      <div class="login_box">
        <el-form
          :model="login_form"
          ref="login_form"
          status-icon
          label-width="0px"
          class="demo-ruleForm"
        >
          <el-form-item prop="username">
            <el-input
              prefix-icon="el-icon-s-custom"
              placeholder="用户名"
              type="text"
              v-model="login_form.username"
              auto-complete="off"
            ></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input
              prefix-icon="iconfont icon-password"
              placeholder="密码"
              type="password"
              v-model="login_form.password"
              auto-complete="off"
            ></el-input>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="LoginAccount('login_form')"
              >登录</el-button
            >
            <el-button @click="resetForm('login_form')">重置</el-button>
            <!-- <el-button @click="ceshi()">测试token过期</el-button> -->
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      login_form: {
        username: '',
        password: '',
      },
    }
  },
 
  methods: {
    
    // ceshi() {
    //   this.axios
    //     .get('https://localhost:44379/api/BehindUsers/CeShi')
    //     .then((res) => {
    //       //console.log('测试', res.data)
    //     })
    // },
    LoginAccount(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          //作者的登录接口
          // const { data: result } = await this.$http.post(
          //   'login',
          //   this.login_form
          // )
          // if (result.meta.status == '200') {
          //   this.$message.success('登陆成功')
          //   //这里是在本地存储token信息
          //   window.sessionStorage.setItem('token', result.data.token)
          //   //跳转到Home首页面
          //   this.$router.push('/Home')
          // } else {
          //   this.$message.error('登陆失败')
          // }

          //自己的接口
          //把用户名存入本地
          window.sessionStorage.setItem('userName',this.login_form.username);
          this.axios
            .get(
              'https://localhost:44379/api/BehindUsers/Login?UserName=' +
                this.login_form.username +
                '&UserPwd=' +
                this.login_form.password
            )
            .then((res) => {
              //console.log(res)
              if (res.data.data.status == 200) {
                this.$message.success('登陆成功')
                //这里是在本地存储token信息
                window.sessionStorage.setItem('token','Bearer '+res.data.data.toKen.tokenStr)
                window.sessionStorage.setItem('guidId', res.data.data.guId)
                window.sessionStorage.setItem('userId', res.data.userId)
                // console.log(
                //   '我的本地token',
                //   window.sessionStorage.getItem('token')
                // )
                //跳转到Home首页面
                this.$router.push('/Home')
              } else {
                this.$message.error('登陆失败')
              }
            })
        } else {
          return false
        }
      })
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },
  },
}
</script>
<style lang="less" scoped>
/*加上scoped只对当前文件样式生效，防止冲突*/
.login_container {
  height: 100%;
  background-color: rgb(0, 118, 139);
  background-image: url('../images/BackGroud.jpg');
}
.login_span {
  height: 300px;
  width: 450px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); //元素居中显示
  background-color: aliceblue;
  border-radius: 3px;
}
.avatar_box {
  height: 130px;
  width: 130px;
  border: solid #eeeeee;
  border-radius: 50%; //圆角
  padding: 10px;
  box-shadow: 0 0 10px #ddd; //加阴影，向外扩散10像素
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: #eee;
  }
}
.login_box {
  position: absolute;
  padding: 0 20px; //按照上、右、下、左的顺序分别设置各边的内边距
  width: 100%;
  bottom: 0; //设置定位元素下外边距边界与其包含块下边界之间的偏移。
  box-sizing: border-box; //padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )
}
.btns {
  display: flex; //将对象作为弹性伸缩盒显示
  justify-content: flex-end; //弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐，同时所有后续的伸缩盒项目与其前一个项目对齐
}
</style>